<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

<div th:insert="head.html"></div>

<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    <div class="container col-md-12" v-if="cartItemList.length<1" >
        <h3 style="text-align: center">还没有任何加购,快去购买吧~</h3>
    </div>

    <div class="container"  v-if="cartItemList.length>0" >
        <div class="row">
            <div class="col-md-12">
                <table class="table">
                    <tr>
                        <th>选择</th>
                        <th>商品名称</th>
                        <th>商品图片</th>
                        <th>商品单价(元)</th>
                        <th>购买数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="item in cartItemList">
                        <td>
                            <input type="checkbox" name="cartItemCheck" :value="item.productId" @click="calculateTotal"/>
                        </td>
                        <td v-text="item.productName" style="height:60px;line-height: 60px">图书名称</td>
                        <td>
                            <img :src="item.productImgsrc" alt="..." style="width: 60px;height: 60px; border-radius: 50%"/>
                        </td>
                        <td v-text="item.price" style="height:60px;line-height: 60px">图书单价</td>
                        <td style="height:60px;line-height: 60px">
                            <a  class="btn btn-default btn-sm" @click.prevent="changeCart(item.productId,-1)">一</a>
                            &nbsp;<span :id="[item.productId+'productSpan']" v-text="item.quantity" >5</span>&nbsp;
                            <a  class="btn btn-default btn-sm" @click.prevent="changeCart(item.productId,1)">十</a>
                        </td>
                        <td :id="[item.productId+'td']" v-text="item.total" style="height:60px;line-height: 60px">图书小计</td>
                        <td style="height:60px;line-height: 60px">
                            <a @click.prevent="changeCart(item.productId,0)" class="btn btn-danger">删除</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <b> 总价(元): {{total}} </b>
            </div>

            <div class="col-md-6" >
                <button class="btn btn-success" @click.prevent="toOrder">结算</button>
            </div>
        </div>

    </div>


</div>




<script>

    console.log("------mycart-----")

    let app = new Vue({
        el:"#app",
        data:{
            cartItemList:[],
            total:"0.00"
        },
        methods:{
            initCartItemList(){
                $.post("/cart/listItems", data=> {
                    this.cartItemList = data;
                })

            },
            changeCart(productId,count){

                $.post("/cart/changeCart",{productId:productId,count:count}, data=> {
                    if(data.quantity === 0){
                        location.href='/myCart.html'
                    }
                    let quantity = "#"+productId+"productSpan";
                    let total = "#"+productId+"td";
                    $(quantity).text(data.quantity)
                    $(total).text(data.total)
                    this.calculateTotal()
                })
            },
            calculateTotal(){
                let productIds = []
                let $input = $("input[name='cartItemCheck']:checked");
                for (const inputElement of $input) {
                    productIds.push($(inputElement).val())
                }
                if (productIds.length >0){
                    $.post('/cart/calculateTotal',{productIds:productIds},data=>{
                        console.log(data)
                        this.total = data
                    })
                }else {
                    this.total = "0.00"
                }
            },
            toOrder(){
                let productIds = []
                let $input = $("input[name='cartItemCheck']:checked");
                for (const inputElement of $input) {
                    productIds.push($(inputElement).val())
                }
                if (productIds.length<1){
                    alert("请选择至少一项")
                    return;
                }
                sessionStorage.setItem("toOrderPreview",JSON.stringify(productIds))
                sessionStorage.setItem("total",this.total)

                location.href = "/orderPreview.html"

            }
        },
        created(){
            this.initCartItemList();
        }
    })

</script>


<div th:insert="foot.html"></div>


</body>
</html>